<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <el-menu :default-active="current" mode="horizontal" :collapse="false" :ellipsis="false">
      <el-menu-item index="1">1</el-menu-item>
      <el-menu-item index="2">2</el-menu-item>
      <el-sub-menu>
        <template #title>Workspace</template>
        <el-menu-item>Workspace1</el-menu-item>
        <el-menu-item>Workspace2</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3">3</el-menu-item>
    </el-menu> -->
    <!-- <div>
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        popper-class="my-autocomplete"
        placeholder="Please input"
        @select="handleSelect"
      >
        <template #suffix>
          <el-icon class="el-input__icon" @click="handleIconClick">
            <edit />
          </el-icon>
        </template>
        <template #default="{ item }">
          <div class="value">{{ item.value }}</div>
          <span class="link">{{ item.link }}</span>
        </template>
      </el-autocomplete>
    </div> -->
    <!-- <zzh-slot>
      <template #slot1>
        <div class="about-slot">about slot</div>
      </template>
    </zzh-slot> -->
    <div style="width: 100px">
      <zzh-tooltip trigger="click" :offset="10" :show-arrow="true" placement="right">
        <template #reference>
          <div style="width: 98px; background-color: greenyellow; text-align: center">点击</div>
        </template>
        <template #floating>
          <div style="width: 98px; background-color: greenyellow; text-align: center">我是内容</div>
        </template>
      </zzh-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import ZzhTooltip from '@/components/zzhtooltip/zzhtooltip.vue'
//import ZzhSlot from '@/components/zzhslot/ZzhSlot.vue'
interface LinkItem {
  value: string
  link: string
}

const state = ref('')
const links = ref<LinkItem[]>([])
const current = ref('1')
const querySearch = (queryString: string, cb: any) => {
  const results = queryString ? links.value.filter(createFilter(queryString)) : links.value
  // call callback function to return suggestion objects
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' }
  ]
}
const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

const handleIconClick = (ev: Event) => {
  console.log(ev)
}

onMounted(() => {
  links.value = loadAll()
})
</script>
<style scoped lang="scss">
:deep(.zzh-popper__arrow::before) {
  --el-text-color-primary: greenyellow;
}
:deep(.el-menu--horizontal.el-menu) {
  border-bottom: 0px;
}
:deep(.el-menu--horizontal .el-menu .el-menu-item) {
  background-color: chocolate;
}

:deep(.el-popper.is-light, .el-popper.is-light > .el-popper__arrow::before) {
  background: #cc0000;
}
:deep(.el-popper__arrow::before) {
  background: #cc0000;
}
.about-slot {
  background-color: blanchedalmond;
}
</style>

<style lang="scss">
.abc {
  background-color: #cc0000 !important;
}
// .el-popper.is-light,
// .el-popper.is-light > .el-popper__arrow::before {
//   //--el-bg-color-overla: #ff6868;
//   background: #cc0000;
// }
</style>
